<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宠物用品商城系统 - 设计文档</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background-color: #f8f9fa;
            color: #333;
            line-height: 1.6;
            padding-bottom: 50px;
        }
        
        header {
            background-color: #f44336;
            color: white;
            padding: 20px 0;
            text-align: center;
            margin-bottom: 30px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        h1, h2, h3, h4 {
            margin-bottom: 15px;
            color: #2d3436;
        }
        
        h1 {
            font-size: 28px;
        }
        
        h2 {
            font-size: 24px;
            border-bottom: 2px solid #f44336;
            padding-bottom: 10px;
            margin-top: 30px;
        }
        
        h3 {
            font-size: 20px;
            margin-top: 25px;
            color: #f44336;
        }
        
        h4 {
            font-size: 18px;
            margin-top: 20px;
        }
        
        p {
            margin-bottom: 15px;
        }
        
        .section {
            background-color: white;
            border-radius: 8px;
            padding: 25px;
            margin-bottom: 30px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .module {
            margin-bottom: 20px;
            padding-left: 15px;
            border-left: 3px solid #f44336;
        }
        
        .table-container {
            overflow-x: auto;
            margin: 20px 0;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        
        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        
        th {
            background-color: #f8f9fa;
            font-weight: bold;
        }
        
        tr:hover {
            background-color: #f8f9fa;
        }
        
        .sql-box {
            background-color: #2d3436;
            color: #f8f9fa;
            padding: 15px;
            border-radius: 6px;
            overflow-x: auto;
            font-family: monospace;
            margin: 15px 0;
            font-size: 14px;
        }
        
        .tab-container {
            margin-bottom: 20px;
        }
        
        .tabs {
            display: flex;
            border-bottom: 1px solid #ddd;
            margin-bottom: 20px;
        }
        
        .tab {
            padding: 10px 20px;
            cursor: pointer;
            border-bottom: 3px solid transparent;
        }
        
        .tab.active {
            border-bottom-color: #f44336;
            color: #f44336;
            font-weight: bold;
        }
        
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
        }
        
        ul {
            margin-left: 25px;
            margin-bottom: 15px;
        }
        
        li {
            margin-bottom: 8px;
        }
    </style>
</head>
<body>
    <header>
        <h1>宠物用品商城系统 - 设计文档</h1>
    </header>
    
    <div class="container">
        <div class="section">
            <h2>一、系统功能规划</h2>
            <p>基于管理员端原型，扩展为完整的三角色系统（管理员、商家、用户），功能规划如下：</p>
            
            <div class="tab-container">
                <div class="tabs">
                    <div class="tab active" onclick="showTab('admin')">管理员模块</div>
                    <div class="tab" onclick="showTab('merchant')">商家模块</div>
                    <div class="tab" onclick="showTab('user')">用户模块</div>
                </div>
                
                <div id="admin" class="tab-content active">
                    <div class="module">
                        <h3>1. 系统管理</h3>
                        <ul>
                            <li>用户管理：查看、禁用/启用系统用户</li>
                            <li>角色权限：管理不同角色的操作权限</li>
                            <li>系统设置：基础参数配置、系统公告管理</li>
                        </ul>
                    </div>
                    
                    <div class="module">
                        <h3>2. 商家管理</h3>
                        <ul>
                            <li>商家审核：审核新入驻商家的资质信息</li>
                            <li>信息管理：查看商家详细信息</li>
                            <li>状态管理：禁用/启用商家账号</li>
                        </ul>
                    </div>
                    
                    <div class="module">
                        <h3>3. 商品管理</h3>
                        <ul>
                            <li>商品审核：审核商家发布的新商品</li>
                            <li>分类管理：维护商品分类体系</li>
                            <li>上下架管理：手动控制商品上下架状态</li>
                        </ul>
                    </div>
                    
                    <div class="module">
                        <h3>4. 订单管理</h3>
                        <ul>
                            <li>订单查询：多条件查询系统所有订单</li>
                            <li>状态跟踪：查看订单全流程状态</li>
                            <li>异常处理：处理订单相关的纠纷和投诉</li>
                        </ul>
                    </div>
                    
                    <div class="module">
                        <h3>5. 数据统计</h3>
                        <ul>
                            <li>销售报表：按时间、分类等维度统计销售数据</li>
                            <li>用户增长：用户注册、活跃数据统计</li>
                            <li>商品分析：商品销售排行、库存预警</li>
                        </ul>
                    </div>
                </div>
                
                <div id="merchant" class="tab-content">
                    <div class="module">
                        <h3>1. 店铺管理</h3>
                        <ul>
                            <li>基本信息设置：店铺名称、简介、联系方式</li>
                            <li>营业时间管理：设置店铺营业和休息时间</li>
                            <li>店铺装修：上传店铺头像、Banner图</li>
                        </ul>
                    </div>
                    
                    <div class="module">
                        <h3>2. 商品管理</h3>
                        <ul>
                            <li>商品发布：添加新商品信息及图片</li>
                            <li>库存管理：更新商品库存数量</li>
                            <li>价格调整：修改商品售价</li>
                            <li>商品下架：手动将商品下架</li>
                        </ul>
                    </div>
                    
                    <div class="module">
                        <h3>3. 订单管理</h3>
                        <ul>
                            <li>订单处理：查看新订单、确认订单</li>
                            <li>发货管理：填写物流信息、标记发货</li>
                            <li>售后处理：处理退款、退货请求</li>
                        </ul>
                    </div>
                    
                    <div class="module">
                        <h3>4. 数据中心</h3>
                        <ul>
                            <li>店铺销售数据：销售额、订单量统计</li>
                            <li>商品热销排行：店内商品销售情况分析</li>
                            <li>客户分析：客户来源、购买偏好分析</li>
                        </ul>
                    </div>
                </div>
                
                <div id="user" class="tab-content">
                    <div class="module">
                        <h3>1. 个人中心</h3>
                        <ul>
                            <li>信息管理：查看、编辑个人信息</li>
                            <li>收货地址：添加、编辑、删除收货地址</li>
                            <li>订单历史：查看所有历史订单记录</li>
                            <li>账户安全：修改密码、绑定手机</li>
                        </ul>
                    </div>
                    
                    <div class="module">
                        <h3>2. 商品浏览</h3>
                        <ul>
                            <li>分类查看：按商品分类浏览商品</li>
                            <li>搜索：通过关键词搜索商品</li>
                            <li>详情查看：查看商品详细信息、评价</li>
                        </ul>
                    </div>
                    
                    <div class="module">
                        <h3>3. 订单管理</h3>
                        <ul>
                            <li>下单：选择商品、填写收货信息、提交订单</li>
                            <li>支付：选择支付方式完成付款</li>
                            <li>退款：发起退款申请</li>
                            <li>评价：确认收货后对商品进行评价</li>
                        </ul>
                    </div>
                    
                    <div class="module">
                        <h3>4. 购物车</h3>
                        <ul>
                            <li>商品加入：将喜欢的商品加入购物车</li>
                            <li>数量调整：修改购物车中商品数量</li>
                            <li>结算：选择购物车商品进行批量结算</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="section">
            <h2>二、数据库设计</h2>
            
            <h3>1. 用户表（user）</h3>
            <p>存储所有用户信息（管理员、商家、普通用户）</p>
            <div class="table-container">
                <table>
                    <tr>
                        <th>字段名</th>
                        <th>数据类型</th>
                        <th>主键/外键</th>
                        <th>说明</th>
                    </tr>
                    <tr>
                        <td>id</td>
                        <td>bigint</td>
                        <td>主键</td>
                        <td>用户ID，自增</td>
                    </tr>
                    <tr>
                        <td>username</td>
                        <td>varchar(50)</td>
                        <td></td>
                        <td>用户名，唯一</td>
                    </tr>
                    <tr>
                        <td>password</td>
                        <td>varchar(100)</td>
                        <td></td>
                        <td>密码（加密存储）</td>
                    </tr>
                    <tr>
                        <td>role</td>
                        <td>tinyint</td>
                        <td></td>
                        <td>角色：1-管理员，2-商家，3-普通用户</td>
                    </tr>
                    <tr>
                        <td>phone</td>
                        <td>varchar(20)</td>
                        <td></td>
                        <td>手机号</td>
                    </tr>
                    <tr>
                        <td>email</td>
                        <td>varchar(100)</td>
                        <td></td>
                        <td>邮箱</td>
                    </tr>
                    <tr>
                        <td>avatar</td>
                        <td>varchar(255)</td>
                        <td></td>
                        <td>头像URL</td>
                    </tr>
                    <tr>
                        <td>status</td>
                        <td>tinyint</td>
                        <td></td>
                        <td>状态：0-禁用，1-正常</td>
                    </tr>
                    <tr>
                        <td>created_at</td>
                        <td>datetime</td>
                        <td></td>
                        <td>创建时间</td>
                    </tr>
                    <tr>
                        <td>updated_at</td>
                        <td>datetime</td>
                        <td></td>
                        <td>更新时间</td>
                    </tr>
                </table>
            </div>
            
            <h3>2. 商家信息表（merchant）</h3>
            <p>存储商家详细信息</p>
            <div class="table-container">
                <table>
                    <tr>
                        <th>字段名</th>
                        <th>数据类型</th>
                        <th>主键/外键</th>
                        <th>说明</th>
                    </tr>
                    <tr>
                        <td>id</td>
                        <td>bigint</td>
                        <td>主键</td>
                        <td>商家ID，自增</td>
                    </tr>
                    <tr>
                        <td>user_id</td>
                        <td>bigint</td>
                        <td>外键</td>
                        <td>关联用户ID</td>
                    </tr>
                    <tr>
                        <td>name</td>
                        <td>varchar(100)</td>
                        <td></td>
                        <td>店铺名称</td>
                    </tr>
                    <tr>
                        <td>contact_person</td>
                        <td>varchar(50)</td>
                        <td></td>
                        <td>联系人</td>
                    </tr>
                    <tr>
                        <td>contact_phone</td>
                        <td>varchar(20)</td>
                        <td></td>
                        <td>联系电话</td>
                    </tr>
                    <tr>
                        <td>category</td>
                        <td>varchar(100)</td>
                        <td></td>
                        <td>主营类别</td>
                    </tr>
                    <tr>
                        <td>address</td>
                        <td>varchar(255)</td>
                        <td></td>
                        <td>经营地址</td>
                    </tr>
                    <tr>
                        <td>license</td>
                        <td>varchar(255)</td>
                        <td></td>
                        <td>营业执照URL</td>
                    </tr>
                    <tr>
                        <td>id_card_front</td>
                        <td>varchar(255)</td>
                        <td></td>
                        <td>身份证正面URL</td>
                    </tr>
                    <tr>
                        <td>id_card_back</td>
                        <td>varchar(255)</td>
                        <td></td>
                        <td>身份证反面URL</td>
                    </tr>
                    <tr>
                        <td>status</td>
                        <td>tinyint</td>
                        <td></td>
                        <td>状态：0-待审核，1-已认证，2-已禁用</td>
                    </tr>
                    <tr>
                        <td>join_time</td>
                        <td>datetime</td>
                        <td></td>
                        <td>入驻时间</td>
                    </tr>
                    <tr>
                        <td>review_comment</td>
                        <td>varchar(500)</td>
                        <td></td>
                        <td>审核意见</td>
                    </tr>
                </table>
            </div>
            
            <h3>3. 商品分类表（product_category）</h3>
            <div class="table-container">
                <table>
                    <tr>
                        <th>字段名</th>
                        <th>数据类型</th>
                        <th>主键/外键</th>
                        <th>说明</th>
                    </tr>
                    <tr>
                        <td>id</td>
                        <td>bigint</td>
                        <td>主键</td>
                        <td>分类ID，自增</td>
                    </tr>
                    <tr>
                        <td>name</td>
                        <td>varchar(50)</td>
                        <td></td>
                        <td>分类名称</td>
                    </tr>
                    <tr>
                        <td>parent_id</td>
                        <td>bigint</td>
                        <td>外键</td>
                        <td>父分类ID，用于构建分类层级</td>
                    </tr>
                    <tr>
                        <td>sort</td>
                        <td>int</td>
                        <td></td>
                        <td>排序序号</td>
                    </tr>
                    <tr>
                        <td>status</td>
                        <td>tinyint</td>
                        <td></td>
                        <td>状态：0-禁用，1-启用</td>
                    </tr>
                </table>
            </div>
            
            <h3>4. 商品表（product）</h3>
            <div class="table-container">
                <table>
                    <tr>
                        <th>字段名</th>
                        <th>数据类型</th>
                        <th>主键/外键</th>
                        <th>说明</th>
                    </tr>
                    <tr>
                        <td>id</td>
                        <td>bigint</td>
                        <td>主键</td>
                        <td>商品ID，自增</td>
                    </tr>
                    <tr>
                        <td>merchant_id</td>
                        <td>bigint</td>
                        <td>外键</td>
                        <td>商家ID</td>
                    </tr>
                    <tr>
                        <td>category_id</td>
                        <td>bigint</td>
                        <td>外键</td>
                        <td>分类ID</td>
                    </tr>
                    <tr>
                        <td>name</td>
                        <td>varchar(200)</td>
                        <td></td>
                        <td>商品名称</td>
                    </tr>
                    <tr>
                        <td>price</td>
                        <td>decimal(10,2)</td>
                        <td></td>
                        <td>售价</td>
                    </tr>
                    <tr>
                        <td>stock</td>
                        <td>int</td>
                        <td></td>
                        <td>库存</td>
                    </tr>
                    <tr>
                        <td>description</td>
                        <td>text</td>
                        <td></td>
                        <td>商品描述</td>
                    </tr>
                    <tr>
                        <td>cover_image</td>
                        <td>varchar(255)</td>
                        <td></td>
                        <td>封面图URL</td>
                    </tr>
                    <tr>
                        <td>status</td>
                        <td>tinyint</td>
                        <td></td>
                        <td>状态：0-待审核，1-已上架，2-已下架</td>
                    </tr>
                    <tr>
                        <td>sales</td>
                        <td>int</td>
                        <td></td>
                        <td>销量</td>
                    </tr>
                </table>
            </div>
            
            <h3>5. 其他主要表</h3>
            <p>还包括：商品图片表（product_image）、订单表（orders）、收货地址表（shipping_address）、购物车表（shopping_cart）等，结构类似上述表设计。</p>
        </div>
        
        <div class="section">
            <h2>三、SQL语句</h2>
            
            <h3>1. 用户表（user）创建语句</h3>
            <div class="sql-box">
CREATE TABLE `user` (
  `id` bigint NOT NULL AUTO_INCREMENT COMMENT '用户ID',
  `username` varchar(50) NOT NULL COMMENT '用户名',
  `password` varchar(100) NOT NULL COMMENT '密码（加密存储）',
  `role` tinyint NOT NULL COMMENT '角色：1-管理员，2-商家，3-普通用户',
  `phone` varchar(20) DEFAULT NULL COMMENT '手机号',
  `email` varchar(100) DEFAULT NULL COMMENT '邮箱',
  `avatar` varchar(255) DEFAULT NULL COMMENT '头像URL',
  `status` tinyint NOT NULL DEFAULT '1' COMMENT '状态：0-禁用，1-正常',
  `created_at` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `updated_at` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`),
  UNIQUE KEY `idx_username` (`username`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='用户表';
            </div>
            
            <h3>2. 商家信息表（merchant）创建语句</h3>
            <div class="sql-box">
CREATE TABLE `merchant` (
  `id` bigint NOT NULL AUTO_INCREMENT COMMENT '商家ID',
  `user_id` bigint NOT NULL COMMENT '关联用户ID',
  `name` varchar(100) NOT NULL COMMENT '店铺名称',
  `contact_person` varchar(50) NOT NULL COMMENT '联系人',
  `contact_phone` varchar(20) NOT NULL COMMENT '联系电话',
  `category` varchar(100) DEFAULT NULL COMMENT '主营类别',
  `address` varchar(255) DEFAULT NULL COMMENT '经营地址',
  `license` varchar(255) DEFAULT NULL COMMENT '营业执照URL',
  `id_card_front` varchar(255) DEFAULT NULL COMMENT '身份证正面URL',
  `id_card_back` varchar(255) DEFAULT NULL COMMENT '身份证反面URL',
  `legal_person` varchar(50) DEFAULT NULL COMMENT '法人',
  `id_card` varchar(20) DEFAULT NULL COMMENT '身份证号',
  `status` tinyint NOT NULL DEFAULT '0' COMMENT '状态：0-待审核，1-已认证，2-已禁用',
  `join_time` datetime DEFAULT NULL COMMENT '入驻时间',
  `review_comment` varchar(500) DEFAULT NULL COMMENT '审核意见',
  `created_at` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `updated_at` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`),
  KEY `idx_user_id` (`user_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='商家信息表';
            </div>
            
            <h3>3. 商品表（product）创建语句</h3>
            <div class="sql-box">
CREATE TABLE `product` (
  `id` bigint NOT NULL AUTO_INCREMENT COMMENT '商品ID',
  `merchant_id` bigint NOT NULL COMMENT '商家ID',
  `category_id` bigint NOT NULL COMMENT '分类ID',
  `name` varchar(200) NOT NULL COMMENT '商品名称',
  `price` decimal(10,2) NOT NULL COMMENT '售价',
  `stock` int NOT NULL DEFAULT '0' COMMENT '库存',
  `description` text COMMENT '商品描述',
  `cover_image` varchar(255) DEFAULT NULL COMMENT '封面图',
  `status` tinyint NOT NULL DEFAULT '0' COMMENT '状态：0-待审核，1-已上架，2-已下架',
  `review_comment` varchar(500) DEFAULT NULL COMMENT '审核意见',
  `sales` int NOT NULL DEFAULT '0' COMMENT '销量',
  `created_at` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `updated_at` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`),
  KEY `idx_merchant_id` (`merchant_id`),
  KEY `idx_category_id` (`category_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='商品表';
            </div>
            
            <h3>4. 订单表（orders）创建语句</h3>
            <div class="sql-box">
CREATE TABLE `orders` (
  `id` bigint NOT NULL AUTO_INCREMENT COMMENT '订单ID',
  `order_no` varchar(50) NOT NULL COMMENT '订单编号',
  `user_id` bigint NOT NULL COMMENT '用户ID',
  `merchant_id` bigint NOT NULL COMMENT '商家ID',
  `product_id` bigint NOT NULL COMMENT '商品ID',
  `product_name` varchar(200) NOT NULL COMMENT '商品名称',
  `product_price` decimal(10,2) NOT NULL COMMENT '商品单价',
  `quantity` int NOT NULL DEFAULT '1' COMMENT '数量',
  `total_amount` decimal(10,2) NOT NULL COMMENT '商品总金额',
  `freight` decimal(10,2) NOT NULL DEFAULT '0.00' COMMENT '运费',
  `discount` decimal(10,2) NOT NULL DEFAULT '0.00' COMMENT '优惠金额',
  `actual_amount` decimal(10,2) NOT NULL COMMENT '实付金额',
  `status` tinyint NOT NULL COMMENT '状态：0-待付款，1-待发货，2-已发货，3-已完成，4-已取消',
  `payment_method` tinyint DEFAULT NULL COMMENT '支付方式：1-微信，2-支付宝',
  `payment_time` datetime DEFAULT NULL COMMENT '支付时间',
  `shipping_time` datetime DEFAULT NULL COMMENT '发货时间',
  `completion_time` datetime DEFAULT NULL COMMENT '完成时间',
  `cancellation_time` datetime DEFAULT NULL COMMENT '取消时间',
  `created_at` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `updated_at` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`),
  UNIQUE KEY `idx_order_no` (`order_no`),
  KEY `idx_user_id` (`user_id`),
  KEY `idx_merchant_id` (`merchant_id`),
  KEY `idx_product_id` (`product_id`),
  KEY `idx_status` (`status`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='订单表';
            </div>
            
            <h3>5. 初始数据SQL</h3>
            <div class="sql-box">
-- 插入默认管理员
INSERT INTO `user` (`username`, `password`, `role`, `status`) 
VALUES ('admin', '$2a$10$V5LQhQV9Q1jMZJZJZJZJZ.7eXJZJZJZJZJZJZJZJZJZJZJZJZJ', 1, 1);
-- 密码为：admin123（已加密）

-- 插入默认商品分类
INSERT INTO `product_category` (`name`, `parent_id`, `sort`) 
VALUES 
('宠物食品', NULL, 1),
('宠物玩具', NULL, 2),
('宠物服饰', NULL, 3),
('日用品', NULL, 4),
('医疗保健', NULL, 5);
            </div>
        </div>
        
    </div>

    <script>
        // 切换标签页
        function showTab(tabId) {
            // 隐藏所有标签内容
            document.querySelectorAll('.tab-content').forEach(tab => {
                tab.classList.remove('active');
            });
            
            // 移除所有标签的active类
            document.querySelectorAll('.tab').forEach(tab => {
                tab.classList.remove('active');
            });
            
            // 显示当前标签内容并添加active类
            document.getElementById(tabId).classList.add('active');
            event.currentTarget.classList.add('active');
        }
    </script>
</body>
</html>
